<template>
    <div class="wechat-box">
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="groupOneName=!groupOneName">
                <i class="group-icon" :class="groupOneName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>背景设置</span>
            </li>
            <ul class="inner-box" :class="{'h0': !groupOneName}">
                <li class="attr-item">
                    <ColorPicker :options="appearance.bgColor"/>
                </li>
            </ul>
        </ul>
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="groupTwoName=!groupTwoName">
                <i class="group-icon" :class="groupTwoName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>文字设置</span>
            </li>
            <ul class="inner-box" :class="{'h0': !groupTwoName}">
                <li class="attr-item">
                    <ColorPicker :options="appearance.color"/>
                </li>
            </ul>
        </ul>
        <ul class="outer-box">
            <li class="group-attribute-name"
                @click="groupThreeName=!groupThreeName">
                <i class="group-icon" :class="groupThreeName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span>按钮设置</span>
            </li>
            <ul class="inner-box btn-setting" :class="{'h0': !groupThreeName}">
                <li class="attr-item">
                    <ColorPicker :options="appearance.btnColor"
                                 :config="{width: 71,labelName: '文字颜色'}"/>
                </li>
                <li class="attr-item">
                    <ColorPicker :options="appearance.btnBgColor"
                                 :config="{width: 71,labelName: '填充颜色'}"/>
                </li>
            </ul>
        </ul>
        <ShowEffect :effect="appearance.effect"/>
    </div>
</template>

<script>
    import ColorPicker from '../common/contentstyle/ColorPicker.vue';
    import ShowEffect from '../common/contentstyle/ShowEffect.vue';

    export default {
        name: 'WeChatStyle',
        props: {
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        bgColor: {
                            color: 'rgba(255,255,255,1)'
                        },
                        color: {
                            color: 'rgba(0,0,0,1)'
                        },
                        btnColor: {
                            color: 'rgba(255,255,255,1)'
                        },
                        btnBgColor: {
                            color: 'rgba(248,89,89,1)'
                        },
                        effect: {
                            value: ''
                        }
                    };
                }
            }
        },
        components: {
            ColorPicker,
            ShowEffect
        },
        data() {
            return {
                groupOneName: true,
                groupTwoName: true,
                groupThreeName: true,
                options: [
                    {label: '默认效果', value: ''},
                    {label: '顶部悬浮', value: 'top'},
                    {label: '底部悬浮', value: 'bottom'}
                ],
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ]
            };
        }
    }
</script>

<style scoped lang="scss">
    .wechat-box {
        @import '../../../styles/init';
        .outer-box:first-child {
            margin-top: 0;
        }
        .outer-box {
            padding-top: 12px;
            margin-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, .15);
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .group-attribute-name {
                height: 20px;
                width: fit-content;
                user-select: none;
                color: #999;
                cursor: pointer;

                .group-icon {
                    font-size: 18px;
                }
            }
            .inner-box {
                height: 48px;
                overflow: hidden;
                transition: height .2s;

                .attr-item {
                    height: 38px;
                    display: flex;
                    overflow: hidden;
                    margin-top: 10px;
                }
            }
            .btn-setting {
                height: 96px;
            }
        }
    }
</style>
